<template>
    <div class="box1">
        <el-form ref="ruleFormRef" style="max-width: 400px" :model="ruleForm" status-icon :rules="rules"
            label-width="auto" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="login">
                    登录
                </el-button>
                <el-button>Reset</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { UserStore } from '@/stores/userinfo'
const userStore = new UserStore()
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    username: '',
    password: ''
})
const router = useRouter()
const rules = reactive<FormRules>({
    

    username: [
        { required: true, message: '账号不能为空', trigger: 'blur' },
    ],
    password: [
        //正则验证

        { required: true, pattern: /^[a-zA-Z0-9]{6-12}$/, message: '密码不能为空', trigger: 'blur' },
        { min: 6, max: 12, message: '6-12位字母数字组合'}
        
    ],
})
const login = async () => {
    const res = await axios.post('/api/login', ruleForm)
    console.log(res);
    const { data: { userInfo }, code
    } = res.data
    // console.log(userInfo, code);
    if (code == 10000) {
        ElMessage({
            message: '登录成功切存入厂库',
            type: 'success',
        })
        userStore.userlist(userInfo)
        localStorage.setItem('token', JSON.stringify(res.data.data.accessToken))

        localStorage.setItem('userInfo', JSON.stringify(userInfo))
        // if(userInfo) return  true;
        router.push('/')
    }

}
</script>
<style scoped>
.box1 {
    position: absolute;
    top: 45%;
    left: 45%;
    transform: translate(-50%, -50%);
}
</style>